<div class="row-fluid" style="margin-bottom: 10px;">
    The panel needs to have at least one metric. For each metric, you can select a different type of stats to be shown.
    Decimal Digit is the number of digits to display after the decimal point. And you can specify your own Label for
    each metric (optional). Not all stats are supported for all field types. Check Solr documentation for details.
</div>

<div class="row-fluid">
    <button class="btn btn-success" ng-click="addMetric();">Add Metric</button>
</div>

<div class="row-fluid">
    <div class="span12">
        <table class="table table-condensed table-striped">
            <thead>
                <th>Stats Type</th>
                <th>Field <tip>Not all statistics are supported for all field types. Check Solr documentation for details.</tip></th>
                <th>Decimal Digits <tip>The number of digits to display after the decimal point.</tip></th>
                <th>Label</th>
            </thead>
            <tr ng-repeat="metric in panel.metrics" data-drag="false" jqyoui-draggable="{animate:true}">
                <td>
                    <select class="input-small" ng-change="set_refresh(true)" ng-model="metric.type"
                            ng-options="f for f in ['count','min','mean','max','sum','stddev','sumOfSquares','missing']"></select>
                </td>
                <td>
                    <input type="text" class="input-large" placeholder="Field name" bs-typeahead="fields.list"
                           ng-model="metric.field" ng-change="set_refresh(true)">
                </td>
                <td>
                    <select class="input-mini" ng-model="metric.decimalDigits" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9]"
                            ng-change="set_refresh(true)"></select>
                </td>
                <td>
                    <input type="text" class="input-large" placeholder="Optional" ng-model="metric.label">
                </td>
                <td>
                    <button class="btn btn-danger" ng-click="removeMetric(metric)"><i class="icon-remove"></i></button>
                </td>
            </tr>
        </table>
    </div>

</div>

<div class="row-fluid">
    <!--<div class="span3">-->
        <!--<label class="small">Style</label>-->
        <!--<select class="input-small" ng-model="panel.chart"-->
                <!--ng-options="f for f in ['bar','pie','list','total']"></select></span>-->
    <!--</div>-->
    <div class="span2" ng-show="panel.chart == 'total' || panel.chart == 'list'">
        <label class="small">Font Size</label>
        <select class="input-mini" ng-model="panel.style['font-size']"
                ng-options="f for f in ['7pt','8pt','9pt','10pt','12pt','14pt','16pt','18pt','20pt','24pt','28pt','32pt','36pt','42pt','48pt','52pt','60pt','72pt']"></select></span>
    </div>
    <!--<div class="span3" ng-show="panel.chart == 'bar' || panel.chart == 'pie'">-->
        <!--<label class="small">Legend</label>-->
        <!--<select class="input-small" ng-model="panel.counter_pos"-->
                <!--ng-options="f for f in ['above','below','none']"></select></span>-->
    <!--</div>-->
    <!--<div class="span3" ng-show="panel.chart != 'total' && panel.counter_pos != 'none'">-->
        <!--<label class="small">List Format</label>-->
        <!--<select class="input-small" ng-model="panel.arrangement"-->
                <!--ng-options="f for f in ['horizontal','vertical']"></select></span>-->
    <!--</div>-->
    <!--<div class="span1" ng-show="panel.chart == 'pie'">-->
        <!--<label class="small">Donut</label><input type="checkbox" ng-model="panel.donut" ng-checked="panel.donut">-->
    <!--</div>-->
    <!--<div class="span1" ng-show="panel.chart == 'pie'">-->
        <!--<label class="small">Tilt</label><input type="checkbox" ng-model="panel.tilt" ng-checked="panel.tilt">-->
    <!--</div>-->
    <!--<div class="span1" ng-show="panel.chart == 'pie'">-->
        <!--<label class="small">Labels</label><input type="checkbox" ng-model="panel.labels" ng-checked="panel.labels">-->
    <!--</div>-->
</div>

<div class="row-fluid">
    <h5>Real-time (Auto-refresh)</h5>
    <div class="span1">
        <label class="small">Enable</label><input type="checkbox" ng-model="panel.refresh.enable"
                                                  ng-checked="panel.refresh.enable">
    </div>
    <div class="span2">
        <label class="small">Interval (seconds)
            <tip>The minimum value is 2.</tip>
        </label>
        <input type="number" min="2" class="input-mini" ng-model="panel.refresh.interval">
    </div>
</div>
